<script>
import axios from "axios";

export default {
  name: "Detail",
  data(){
    return {
      info:{},
      isLoading:true
    }
  },
  beforeRouteUpdate(to,from,next){
    this.getFilmInfo(to.params.id);
    next();
  },
  methods:{
    async getFilmInfo(filmId=this.$route.params.id){
      this.isLoading = true;
      const {data} = await axios.get("https://m.maizuo.com/gateway",{
        params:{
          filmId
        },
        headers:{
          "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.2.1","e":"1762673692770985284337665","bc":"110100"}',
          "X-Host": "mall.film-ticket.film.info"
        }
      });
      this.isLoading = false;
      this.info = data.data.film;
    }
  },
  mounted() {
    this.getFilmInfo();
  }
}
</script>

<template>
  <div>
    <h3 v-if="isLoading">正在加载中……</h3>
    <template v-else>
      <h3>{{info.name}}</h3>
      <p>{{info.synopsis}}</p>
    </template>

  </div>
</template>

<style scoped>

</style>